<template >
  <div style="background:#f3f3f3;height:100%;">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">选择员工</h1>
      <div class="mint-header-button is-right" />
    </header>
    <div>
      <van-tree-select :items="arr[0]" :active-id.sync="activeIds" :main-active-index.sync="activeIndex" @click-item="onitemclick" />
      <div style="margin:20px auto;text-align:center;">
        <mt-button type="primary" style="width:90%;height:36px;font-size:14px;" @click="submitcar">确认</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import { TreeSelect } from 'vant'
export default {
  name: 'App',
  layout: 'default2',
  components: {},
  data () {
    return {
      activeIndex: 0,

      activeIds: [],

      arr: [],
      ts: this.newStore(),
      detail: {},
      pdata: {}
    }
  },
  created () { },
  mounted () {
    // console.log(this.$route.query)

    this.detail = JSON.parse(this.$route.query.detail)
    if (this.$route.query.type == '1') {
      this.activeIds = this.detail.charger
    } else {
      this.activeIds = this.detail.noticer
    }

    this.getbumenrenyuan();

    console.log(this.arr)
  },
  methods: {
    onitemclick () {
      console.log(1)
    },
    gonuxt (val, name) {
      this.$route.push({ name: val, query: { name: name } })
    },
    submitcar () {
      if (this.$route.query.type == '1') {
        this.detail.charger = []
        this.detail.chargername = ''
        this.activeIds.forEach(id => {
          this.pdata.forEach(el => {
            if (el.pid == id) {
              this.detail.charger.push(el.pid)
              this.detail.chargername += el.username + ','
            }
          })
        })
      } else {
        this.detail.noticer = []
        this.activeIds.forEach(id => {
          this.pdata.forEach(el => {
            if (el.pid == id) {
              this.detail.noticer.push(el.pid)
              this.detail.noticername += el.username + ','
            }
          })
        })
      }
      console.log('1111', this.detail)

      this.$router.push({
        name: 'post_task',
        query: {
          detail: JSON.stringify(this.detail)
        }
      })
    },
    getbumenrenyuan () {
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.getTreedata(ts.d.data.operation1)
          this.pdata = ts.d.data.operation1.map(item => item.hash)
        }
      })
    },
    getTreedata (data) {
      const arr = data
      const arr1 = arr.map(item => item.hash)
      const date = []
      const obj = {
        id: 987654321,
        text: '全部',
        children: []
      }
      //先遍历获取所有部门
      arr1.forEach(item => {
        if (!date.includes(item.orgname)) {
          date.push(item.orgname)
        }
      })
      //遍历部分获取数组
      const ars = []
      date.forEach((item, ind) => {
        console.log(item);
        console.log(ind);
        ars.push({
          id: ind,
          text: item,
          children: []
        })
      })
      arr1.forEach(item => {
        ars.forEach(file => {
          if (file.text === item.orgname) {
            file.children.push({
              id: item.pid,
              text: item.username
            })
          }
        })
      })
      obj.children = ars
      this.arr.push(ars)
      console.log(this.arr)
    },

    option () {
      this.$router.push({
        name: 'post_task',
        query: {
          name: ''
        }
      })
    }
  }
}
</script>
<style scoped>
html,
body,
#app {
  height: 100% !important;
  background: #f3f3f3 !important;
}
a {
  text-decoration: none;
}
.blockDiv {
  margin-top: 100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
}
.block {
  width: calc(calc(100% / 2) - 10px);
  margin: 5px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
}
.info-title {
  padding: 10px;
  color: #ccc;
  font-size: 16px;
}
.bg-con {
  background: #fff;
  width: 95%;
  margin: 0 auto 5px;
}
.img_id img {
  width: 100%;
  margin: 10px 5px;
  text-align: center;
  box-sizing: border-box;
}
.mint-cell-wrapper {
  font-size: 14px;
}
.xuli_div {
  background: #fff;
  padding: 5px;
  font-size: 15px;
  width: 95%;
  margin: 0 auto;
}
.xuli_span {
  border-left: 3px solid #ccc;
  display: inline-block;
  padding-left: 5px;
}
.mint-field-core {
  text-align: right !important;
}
.mt_10 {
  margin-top: 10px;
}
</style>